/*
 * @Copyright (c) 2021 NetEase, Inc.  All rights reserved.
 * Use of this source code is governed by a MIT license that can be found in the LICENSE file
 */
.member-list {
  display: flex;
  .list-wrapper {
    min-width: 72px;
    height: 68px;
    margin-right: 36px;
    margin-left: -18px;
    display: flex;
    .list-content {
      min-width: 60px;
      text-align: center;
      position: relative;
      button {
        margin: 8px 0px 3px 0px;
      }
      .gray {
        color: #89909c;
        font-size: 10px;
      }
      .red {
        color: #d93d35;
        font-size: 10px;
      }
      .blue {
        color: #3772ff;
        font-size: 10px;
      }
      img {
        width: 24px;
      }
      img.chat-icon {
        width: 20px;
      }
    }
    .list-arrows {
      button {
        width: 12px;
        height: 68px;
      }
      img {
        width: 12px;
      }
    }
  }
  .circle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    background-color: #d93d35;
    border-radius: 8px;
    color: #ffffff;
    font-size: 10px;
    top: 5px;
    right: 9px;
  }
  .message-count {
    width: 10px;
    height: 10px;
    top: 8px;
    right: 10px;
  }
}
.mores {
  position: relative;
}
.tooltip {
  .ant-tooltip-inner {
    // width: 115px;
    // height: 108px;
    background: #333b45;
    border-radius: 4px;
    padding-top: 5px;
  }
  .ant-btn-text {
    color: #fff;
    font-size: 14px;
  }
  .ant-tooltip-arrow {
    display: none;
  }
}
.footers {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 10px;
  .ant-checkbox-wrapper {
    color: #b4bfd0;
    margin-left: 25px;
  }
  .ant-checkbox-inner {
    border: 1px solid #337eff;
    border-radius: 2px;
    // background: #232C37;
    background: #337eff;
  }
  // .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
  //   border: 1px solid #445060;
  // }
  .mute {
    color: #b4bfd0;
    font-size: 14px;
  }
  .red {
    color: #ff6157;
    font-size: 14px;
  }
  .infoImg {
    width: 11px;
    margin-left: -6px;
    cursor: pointer;
  }
  .mute-icons {
    img {
      width: 14.67px;
      padding-bottom: 4px;
    }
  }
}

.mute-desc {
  color: #b4bfd0;
  font-size: 14px;
}

.mute-tooltip {
  .ant-tooltip-inner {
    width: 228px;
    background: #333b45;
    border-radius: 2px;
    padding: 16px;
  }
  .ant-btn-text {
    color: #b4bfd0;
    font-size: 14px;
  }
  .ant-tooltip-arrow {
    display: none;
  }
}
.member-mute-all {
  display: flex;
  align-items: center;
  color: #b4bfd0;
  span {
    color: #b4bfd0;
    margin-left: 5px;
  }
  img {
    width: 15px;
  }
}
.member-mute-all.active-mute {
  color: #ff6157;
  .ant-btn::before {
    background: none;
  }
  span {
    color: #ff6157;
  }
}
.search {
  width: 467px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // button {
  //   width: 60px;
  // }
  .ant-input {
    // color: #4A5665;
    color: #b4bfd0;
    font-size: 14px;
    background: #232c37;
    border: none;
    border-radius: 2px;
    width: 340px;
    &:hover,
    &:active,
    &:focus {
      box-shadow: none;
    }
  }
  .ant-btn {
    background: #4875fb;
    border-radius: 2px;
    border: none;
    color: #fff;
    &:hover,
    &:active,
    &:focus {
      border-color: #4875fb;
      color: #fff;
      box-shadow: none;
    }
  }
  .ant-input-affix-wrapper {
    border: 1px solid #4f5a68;
    background-color: #232c37;
    display: inline-block;
    width: 386px;
    &:hover,
    &:active,
    &:focus {
      border: 1px solid #4f5a68;
      box-shadow: none;
    }
  }
  .ant-input-affix-wrapper-focused {
    box-shadow: none;
  }
  .ant-input-suffix {
    display: inline-block;
  }
}
.memberModal {
  .rc-virtual-list-holder {
    overflow-y: auto !important;
  }
}